<template>
  <div v-loading="options.length === 0">
    <el-dialog v-model="dialogVisible" v-bind="$attrs">
      <el-scrollbar max-height="500px">
        <m-form
          :options="options"
          label-width="100px"
          :on-change="onChange"
          :before-upload="onBeforeUpload"
          :on-preview="onPreview"
          :on-remove="onRemove"
          :before-remove="beforeRemove"
          :on-success="onSuccess"
          :on-error="onError"
          :on-exceed="onExceed"
          ref="form"
        >
          <template #uploadArea>
            <slot name="uploadArea"></slot>
          </template>
          <template #uploadTip>
            <slot name="uploadTip"></slot>
          </template>
        </m-form>
      </el-scrollbar>

      <template #footer>
        <slot name="footer" :form="form"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { FormInstance } from "element-plus";
import { ref, watch, PropType } from "vue";
import { FormOptionsVO } from "@/components/form/src/types/types";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  options: {
    type: Array as PropType<FormOptionsVO[]>,
    required: true,
  },
  onChange: {
    type: Function,
  },
  onBeforeUpload: {
    type: Function,
  },
  onPreview: {
    type: Function,
  },
  onRemove: {
    type: Function,
  },
  beforeRemove: {
    type: Function,
  },
  onSuccess: {
    type: Function,
  },
  onError: {
    type: Function,
  },
  onExceed: {
    type: Function,
  },
  isScroll: {
    type: Boolean,
    default: false,
  },
});
let emits = defineEmits(["update:visible"]);
let dialogVisible = ref(props.visible);
let form = ref<FormInstance>();
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal;
  }
);
watch(
  () => dialogVisible.value,
  (val) => {
    emits("update:visible", val);
  }
);
</script>

<style scoped></style>
